<template>
    <div>
        <Card>
            <el-form :model="formInline" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="机构:">
                            <el-select v-model="formInline.institution" clearable  placeholder="请选择" class="ibput">
                                <el-option v-for="(item,index) in organizationList" :label="item.companyName" :value="item.companyCode" :key="index">
                                {{item.label}}</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="行政区域:">
                            <el-select v-model="formInline.region" placeholder="请选择" class="ibput">
                                <el-option label="锡山区" value="shanghai"></el-option>
                                <el-option label="梁溪区" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="应交月:">
                            <el-date-picker
                                v-model="formInline.datetimerange"
                                type="month"
                                format="yyyy-MM"
                                style="width:100%;"
                                >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="渠道:">
                            <el-select v-model="formInline.channel" placeholder="请选择" class="ibput">
                                <el-option label="个险" value="shanghai"></el-option>
                                <el-option label="银保" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="交次:">
                            <el-select v-model="formInline.PayTime" placeholder="请选择" class="ibput">
                                <el-option label="二次" value="shanghai"></el-option>
                                <el-option label="三次" value="beijing"></el-option>
                                <el-option label="四次及以上" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否考核件:">
                            <el-select v-model="formInline.EvaluationPiece" placeholder="请选择" class="ibput">
                                <el-option label="是" value="shanghai"></el-option>
                                <el-option label="否" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="是否大单:">
                            <el-select v-model="formInline.BigTicket" placeholder="请选择" class="ibput">
                                <el-option label="是" value="0"></el-option>
                                <el-option label="否" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="">
                            <div class="btn">
                                <el-button type="primary" size="mini" @click="submit">查询
                                </el-button>
                                <el-button type="primary" size="mini">导出
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </Card>
        <Card style="margin-top: 20px;">
            <el-table :data="tableList" >
                <el-table-column width="150" label="机构" prop="manageComName" align="center" />
                <el-table-column width="150" label="行政区域" prop="manageCom" align="center" />
                <el-table-column width="150" label="分单区域" prop="renewal" align="center" />
                <el-table-column width="150" label="服务类型" prop="type" align="center" />
                <el-table-column width="150" label="续收人员所属部" prop="renewalDepartmentName" align="center" />
                <el-table-column width="150" label="续收人员所属组" prop="renewalGroupName" align="center" />
                <el-table-column width="150" label="续收人员" prop="renewalName" align="center" />
                <el-table-column width="80" label="应交月" prop="month" align="center" />
                <el-table-column width="80" label="工作量" prop="work" align="center" />
                <el-table-column width="80" label="总件数" prop="sum" align="center" />
                <el-table-column width="80" label="总保费" prop="sumpay" align="center" />
                <el-table-column width="100" label="大额单件数" prop="big" align="center" />
                <el-table-column width="100" label="大额单保费" prop="bigpay" align="center" />
                <el-table-column width="100" label="高难度件件数" prop="hight" align="center" />
                <el-table-column width="100" label="高难度件保费" prop="hightpay" align="center" />
                <el-table-column width="150" label="本次分配的保单数" prop="num" align="center" />
                <el-table-column width="110" label="操作" align="center" fixed="right">
                    <template slot-scope="{ row }">
                        <span @click="change(row)" class="change">保单详情</span>                    
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="tableList.length" :page.sync="formInline.pageNum" :limit.sync="formInline.pageSize" @pagination="getList" />
            <el-dialog
                title="保单详情"
                :visible.sync="dialogVisible"
                class="dialog"
                >
                <!-- <span>这是一段信息</span> -->
                <el-table :data="tableList2" >
                    <el-table-column width="150" label="投保人" prop="name" align="center" />
                    <el-table-column width="150" label="保单号" prop="contno" align="center" />
                    <el-table-column width="120" label="渠道" prop="type" align="center" />
                    <el-table-column width="120" label="交次" prop="paytime" align="center" />
                    <el-table-column width="120" label="保费" prop="pay" align="center" />
                    <el-table-column width="120" label="困难件分数" prop="num" align="center" />
                    <el-table-column width="120" label="督导专员代码" prop="code" align="center" />
                    <el-table-column width="120" label="督导专员姓名" prop="codename" align="center" />
                    <el-table-column width="180" label="投保人联系地址" prop="address" align="center" />
                    <el-table-column width="150" label="主险" prop="typea" align="center" />
                    <el-table-column width="150" label="主险险类" prop="typepay" align="center" />
                    <el-table-column width="150" label="保单状态" prop="status" align="center" />
                </el-table>
            </el-dialog>
        </Card>
    </div>
</template>

<script>
import { getCompanyList } from '../../../api/renewalPlatformApi/index';

export default {
    name:'suborderQuery',
    data(){
        return{
            text:'',
            formInline:{
                institution:"",
                region:"",
                datetimerange:"",
                channel:"",
                PayTime:"",
                EvaluationPiece:"",
                BigTicket:""
            },
            tableList:[],
            tableList1:[                
                {manageComName:'人寿无锡分公司',manageCom:'梁溪区',renewal:'梁溪区',type:'督导件',renewalDepartmentName:'吴江业务三部',renewalGroupName:'吴江业务三部三组',renewalName:'王新海',month:'2023-12',work:'12',sum:'45',sumpay:'652',big:'23',bigpay:'429',hight:'23',hightpay:'892',num:'34'}
            ],
            organizationList:[],
            // list:[{label:'地图分单',value:'1'},{label:'督导关系分单',value:'2'}],
            dialogVisible: false,
            tableList2:[
                {name:'张科',contno:'112201600019288',type:'个险',paytime:'2/10年',pay:'3400',num:'3',code:'8601003',codename:'王新海',address:'无锡市梁溪区幸福花园小区五栋302',typepay:'年金险',typea:'福满人生年金保险',status:'有效'}
            ]
        }
    },
    watch:{
        'formInline.datetimerange':{
            handler(val,old){
                var Y = val.getFullYear() + '-';
                var M = (val.getMonth() + 1 < 10 ? '0' + (val.getMonth() + 1) : val.getMonth() + 1) ;
                let date = Y+M
                this.tableList1[0].month = date
            }
        }
    },
    created(){ 
        this.getList() 
    },
    methods: {
        getList() {
            getCompanyList({ companyType: '2' }).then((res) => {
                if (res.code === 200) {
                    res.data.forEach(item => {
                        let temp = {
                        companyCode: item.companyCode,
                        companyName: item.companyName,
                        placeCode: item.placeCode,
                        isShowSon: false,
                        checked: [],
                        cityList: [],
                        manageCom: item.companyCode + '-' + item.companyName,
                        }
                        this.organizationList.push(temp);
                        // console.log(this.organizationList,"organizationListorganizationList")
                    });
                }
            }).finally(() => {})
        },
        submit(){
            console.log(this.formInline.institution,"submitsubmit")
                this.tableList = this.tableList1
        },
        change(row){
            console.log(row,"查看保单详情")
            this.dialogVisible = true
        }
    }

}
</script>

<style scoped>
.text{
    color: blue;
    cursor: pointer;
}
.change{
    color:blue;
    cursor: pointer;
}
.el-select{
    width: 100%;
}
.btn{
    /* display: inline-block; */
    float: right; 
}
.dialog{
    width:"50%";
    margin-top:5%;
}
</style>